<template>
  <div style="height: 100%">
    <div>
      父组件
      <button @click="dialogVisible = true">+新增</button>
    </div>
    <!-- v-model这样写，父子组件只能同步一个数据，如果要同步多个呢 -->
    <!-- <MyDialog v-model="dialogVisible"> -->

    <!-- 如果加了:show，那么子组件接收的值，就必须是show -->
    <Teleport to="body">
      <MyDialog v-model:show="dialogVisible">
        <template #title>
          <h1>我是标题</h1>
        </template>
        <div>
          <p>用户名：<input /></p>
          <p>密码：<input /></p>
        </div>
        <template #footer>
          <p>
            <button @click="dialogVisible = false">取消</button>&nbsp;
            <button @click="onSubmit">确定</button>
          </p>
        </template>
      </MyDialog>
    </Teleport>
  </div>
</template>

<script setup lang="ts" name="TestVModel">
import MyDialog from './MyDialog.vue'
import { ref } from 'vue'
const dialogVisible = ref(false)
const onSubmit = () => {
  // 提交
  dialogVisible.value = false
}
</script>
